<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
    <link href="/static/bootstrap/css/bootstrap2.min.css" rel="stylesheet">
<link href='/static/fullcalendar/lib/fullcalendar.min.css' rel='stylesheet' />
<link href='/static/fullcalendar/lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/static/fullcalendar/lib/moment.min.js'></script>
<script src='/static/fullcalendar/lib/jquery.min.js'></script>
<script src='/static/fullcalendar/fullcalendar.min.js'></script>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

<script>

	$(document).ready(function() {

		$('#calendar').fullCalendar({
			header: {
				left: 'today',
				center: 'title,prev,next',
				right: 'listDay,listWeek,month'
			},

			// customize the button names,
			// otherwise they'd all just say "list"
			views: {
				listDay: { buttonText: '日' },
				listWeek: { buttonText: '周' },
                month: { buttonText: '月' }
			},

			defaultView: 'listWeek',
			/* defaultDate: '2017-03-12', */
			navLinks: true, // can click day/week names to navigate views
			editable: true,
			eventLimit: true, // allow "more" link when too many events
			events: function(start,end,timezone, callback) {
		        var date = this.getDate().format('YYYY-MM');

		        $.ajax({
		            url: '/colleague/colleague_events?colleague_id={{ colleague_id }}',
		            dataType: 'json',
		            success: function(jsonRes) { // 获取当前月的数据
		                JsonResult = JSON.parse(jsonRes);
                        var json = eval(JsonResult);

                        var events = [];
		                for(var i = 0; i< json.length; i++){
		                	 events.push({
                              title: json[i].title,
                              start: json[i].start,
                              end:json[i].end,
                                 id:json[i].id,
                                color: json[i].color
                             });
		                }
                        console.log(events);
		                callback(events);
		                console.log("callback finish");
		            }
		        });
		    },

            //列表点击事件
		     eventClick: function(calEvent, jsEvent, view) {
			     $('#finishModel').modal('show');
			     $('#scheduleId').val(calEvent.id);
		        //alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
		        //alert('View: ' + view.name);
		        $(this).css('border-color', 'red');
		    }

		});
		$('.fc-today-button').before('<button type="button" id="btnAdd" data-toggle="modal" data-target="#myModal" class="fc-promptResource-button fc-button fc-state-default fc-corner-left fc-corner-right btn btn-primary btn-lg">+添加</button>');
		{#$('.fc-today-button').after('<button type="button" id="btnFinished" onclick="fnFinished()" class="fc-promptResource-button fc-button fc-state-default fc-corner-left fc-corner-right btn btn-primary btn-lg">已完成</button>');#}

		//--绑定完成事件


	});

	//--新增待办
	function fnSubmit() {
	    var title = $("#title").val();
		var startTime = $("#endTime").val();
		var endTime = $("#endTime").val();
		$.ajax({
			type : "POST",//方法类型
			dataType : "text",//预期服务器返回的数据类型
			url : "http://localhost:5000/schedule/schedule_add",//url
			data : "{\"title\":\""+title+"\",\"sdate\":\""+startTime+"\",\"edate\":\""+endTime+"\"}",
			success : function(result) {
				console.log(result);//打印服务端返回的数据(调试用)
                alert(result);
                window.location.reload();
			},
			error : function() {
			    alert("新增待办出错！");
				window.location.reload();
			}
		});
		//$('#addTodo').submit();
	};

	//--完成待办
	function fnFinish() {
	    var finishId = $("#scheduleId").val();
		$.ajax({
			type : "POST",//方法类型
			dataType : "text",//预期服务器返回的数据类型
			url : "http://localhost:5000/schedule/schedule_finish",//url
			data : "{\"finishId\":\""+finishId+"\"}",
			success : function(result) {
				console.log(result);//打印服务端返回的数据(调试用)
				alert(result);
				window.location.reload();
			},
			error : function() {
			    alert("待办完成出错！");
				window.location.reload();
			}
		});
	};

	//--删除待办
	function fnDelete() {
		var deleteId = $("#scheduleId").val();
		$.ajax({
			type : "POST",//方法类型
			dataType : "text",//预期服务器返回的数据类型
			url : "http://localhost:5000/schedule/schedule_delete",//url
			data : "{\"deleteId\":\""+deleteId+"\"}",
			success : function(result) {
				console.log(result);//打印服务端返回的数据(调试用)
                alert(result);
                $("#btnSubmit").attr("disabled", true);
                window.location.reload();
			},
			error : function() {
			    alert("删除失败！");
				window.location.reload();
			}
		});
		//$('#addTodo').submit();
	};

	//已完成列表
	function fnFinished() {
	    $('#finishedModel').modal('show');

	};
</script>
<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	/* 	background: #583e7e; */
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

</style>
</head>
<body style="background: url('/static/imgs/background.jpg');background-repeat:no-repeat;background-size:cover">
    <!-- 导航栏 -->
    <nav class="navbar navbar-fixed-top navbar-inverse" style="height: 40px;" >
      <div class="container">
        <div class="navbar-header" style="height: 40px;">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/user/to_user_index_page">主页</a></li>
            <li><a href="/schedule/toScheduleList">代办列表</a></li>
            <li><a href="/colleague/colleague_list">好友管理</a></li>
            <li><a href="/group/user_group_list">小组管理</a></li>
            <li><a href="#" data-toggle="modal"  data-target="#updateUserInfo">欢迎您 {{ session["user_nickname"] }}</a></li>
            <li><a href="/user/user_logout">注销</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

     <!-- 修改用户信息 -->
<div class="modal fade" id="updateUserInfo" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
	            </div>
                <div class="modal-body">
                      <div class="form-group">
					    <label for="exampleInput1">用户名</label>
					    <input type="text" class="form-control" id="update_user_name" value="{{ session['user_name'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">密码</label>
					    <input type="text" class="form-control" id="update_user_pwd" value="{{ session['user_pwd'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">昵称</label>
					    <input type="text" class="form-control" id="update_user_nickname" value="{{ session['user_nickname'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">性别</label>
					    <input type="text" class="form-control" id="update_user_sex" value="{{ session['user_sex'] }}">
					  </div>
                      <div class="form-group">
					    <label for="exampleInput1">邮箱</label>
					    <input type="text" class="form-control" id="update_user_email" value="{{ session['user_email'] }}">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput1">电话</label>
					    <input type="text" class="form-control" id="update_user_phone" value="{{ session['user_phone'] }}">
					  </div>
	            </div>
                <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="updateUser()">修改</button>
	            </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script> //修改小组
	function updateUser() {
	    var user_name = $('#update_user_name').val();
	    var user_pwd = $('#update_user_pwd').val();
	    var user_nickname = $('#update_user_nickname').val();
	    var user_sex = $('#update_user_sex').val();
	    var user_email = $('#update_user_email').val();
	    var user_phone = $('#update_user_phone').val();
		if(confirm("确认修改？")) {
            $.ajax({
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/user/user_data_update",//url
                data:"{\"user_sex\":\""+user_sex+"\",\"user_name\":\""+user_name+"\",\"user_pwd\":\""+user_pwd+"\",\"user_nickname\":\""+user_nickname+"\",\"user_email\":\""+user_email+"\",\"user_phone\":\""+user_phone+"\"}",
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    alert(result);
                    window.location.reload();
                },
                error: function () {
                    alert("修改用户信息失败！");
                    window.location.reload();
                }
            });
        }
	};
    </script>

    <!-- 导航栏结束 -->

      <br>
	<div id='calendar'></div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">添加待办事项</h4>
	            </div>
	            <div class="modal-body">
	              <form id="addTodo" method="post" action="">
					  <div class="form-group">
					    <label for="exampleInput1">待办事项标题</label>
					    <input type="text" class="form-control" id="title" placeholder="待办事项标题">
					  </div>
					  <div class="form-group">
					    <label for="exampleInput3">结束时间</label>
					    <input type="text" class="form-control" id="endTime" placeholder="结束时间">
					  </div>
					</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" id="btnSubmit" class="btn btn-primary" onclick="fnSubmit()">提交</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>

    <div class="modal fade" id="finishModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">待办事项完成</h4>
	            </div>
	            <div class="modal-body">
                    <input type="hidden" id="scheduleId">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="fnFinish()">完成</button>
                    <button type="button" id="btnSubmit" class="btn btn-primary" onclick="fnDelete()">删除</button>
                </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>

    <div class="modal fade" id="finishedModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">已完成列表</h4>
	            </div>
	            <div class="modal-body">
                    <input type="hidden" id="scheduleId">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="fnFinish()">完成</button>
                    <button type="button" id="btnSubmit" class="btn btn-primary" onclick="fnDelete()">删除</button>
                </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
</body>
</html>
